<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
  <div>
      <Row>
        <Col span="24">
            <Card>
                <p slot="title">会员列表</p>
                <!-- <Row>
                    <Col span="16">
                        <Input  style="width:150px" placeholder="用户手机号码" v-model="search.phone"></Input>
                        <Button @click="handleSearch" type="primary" shape="circle" icon="ios-search"></Button>
                    </Col>
                </Row>
                <br> -->
                <Row>
                    <div class="edittable-table-height-con">
                        <Table stripe :loading="isLoading"
                            :columns="columns" :data="companys" border disabled-hover></Table>

                            <div style="margin: 10px;overflow: hidden">
                                <div style="float: right;">
                                    <Page :total="total" :current="currentPage" :page-size="20" @on-change="changePage" show-elevator></Page>
                                </div>
                            </div>
                    </div>
                </Row>
            </Card>
        </Col>
      </Row>
  </div>

</template>

<script>
import dataTable from '../my-components/data-table/editableTable.vue';
export default {
    name: 'company-index',
    components: {
        dataTable
    },
    data () {
        return {
            isLoading: true,
            // 表头
            columns: [
                // {
                //     title: '手机号码',
                //     align: 'center',
                //     key: 'phone'
                // },
                {
                    title: '头像',
                    align: 'center',
                    render: (h, params) => {
					    const val = params.row;
					    return h('a', {
                            attrs: {
                                href: val.headImg,
                                target: '_black'
                            }
					    },
                        [
                            h('img', {
                                attrs: {
                                    src: val.headImg,
                                    width: '50px',
                                    height: '50px'
							    }
						    })]
					    );
                    }
			    },
                {
                    title: '个人信息卡数量',
                    align: 'center',
                    render: (h, params) => {
					    const val = params.row;
					    return h('Button', {
		                   props: {
                                type: 'info',
                                size: 'small',
                                shape: 'circle'
                            },
                            on: {
                                click: () => {
                                	this.$router.push({
                                		name: 'member_info',
                                		params: {openId: val.openId}
                                	});
                                }
                            }
					    }, val.cardCount);
                    }
                },
                {
                    title: '状态',
                    align: 'center',
                    render: (h, params) => {
                        const val = params.row;
                        if (val.status === 1) {
                            return h('Tag', {
                                props: {
                                    color: 'green'
                                }
                            }, '正常');
                        } else if (val.status === 2) {
                            return h('Tag', {
                                props: {
                                    color: 'red'
                                }
                            }, '锁定');
                        }
                    }
                },
                {
                    title: '注册时间',
                    align: 'center',
                    key: 'createTime'
                },
                {
                    title: '操作',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row;
                        let children = [];
                        if (this.$hasPerms('member:locking')) {
                            children.push(
                                h('Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            title: row.status === 1 ? '您确定要锁定吗?' : '您确定要解锁吗?',
                                            transfer: true
                                        },
                                        on: {
                                            'on-ok': () => {
                                                this.handleLocking(params.row);
                                            }
                                        }
                                    },
                                    [
                                        h('Button', {
                                            props: {
                                                type: row.status === 1 ? 'error' : 'info',
                                                size: 'small',
                                                icon: row.status === 1 ? 'ios-locked' : 'ios-unlocked',
                                                shape: 'circle'
                                            },
                                            style: {
                                                margin: '2px 5px'
                                            }
                                        }, row.status === 1 ? '锁定' : '解锁')
                                    ])
                            );
                        } else {
                            children.push(
                                h('span', {}, '无')
                            );
                        }
                        return h('div', children);
                    }
                }
            ],
            // 数据
            companys: [],
            total: 0,
            currentPage: 1,
            search: {
                phone: null
            }
        };
    },
    methods: {
        getData () {
            this.isLoading = true;
            this.$get('/member/list?pageNum=' + this.currentPage, this.search)
                .then(res => {
                    this.companys = res.records;
                    this.total = res.total;
                    this.currentPage = res.current;

                    this.isLoading = false;
                })
                .catch(error => {
                    this.isLoading = false;
                    this.$Message.error(error.msg || error.message);
                });
        },
        handleAudit (val) {
            console.log(val);
            this.detail.comIntroduce = val.comIntroduce;
            this.detail.imgs = val.dramaImages;
            this.detailModal = true;
        },
        handleLocking (val) {
            // 锁定
            this.$post('/member/locking', {memberId: val.id, status: val.status === 1 ? 2 : 1})
                .then(res => {
                    this.getData();
                    this.$Message.success(val.status === 1 ? '锁定成功' : '解锁成功');
                }).catch(error => {
                    this.$Message.error(error.message);
                });
        },
        handleSearch () {
            this.currentPage = 1;
            this.getData();
        },
        changePage (pageNum) {
            this.currentPage = pageNum;
            this.getData();
        }
    },
    created () {
        this.getData();
    }
};
</script>
